import React, { useState, useEffect } from 'react';
import { Card, Form, Input, Button, Row, Col, Switch, Select, message, Divider } from 'antd';
import { SaveOutlined, ReloadOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';

const { Option } = Select;

interface SettingsData {
  // 系统设置
  systemName: string;
  systemLogo: string;
  systemIcon: string;
  systemDescription: string;
  
  // 安全设置
  passwordMinLength: number;
  passwordComplexity: boolean;
  loginRetryLimit: number;
  sessionTimeout: number;
  
  // 通知设置
  emailNotifications: boolean;
  smsNotifications: boolean;
  systemNotifications: boolean;
  
  // 界面设置
  theme: 'light' | 'dark';
  language: 'zh-CN' | 'en-US';
  sidebarCollapsed: boolean;
  
  // 监控设置
  monitorEnabled: boolean;
  monitorInterval: number;
  alertThreshold: number;
  
  // 存储设置
  dataRetentionDays: number;
  autoBackupEnabled: boolean;
  backupInterval: number;
}

const Settings: React.FC = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();
  const [loading, setLoading] = useState(false);
  const [uploading, setUploading] = useState(false);

  // 模拟设置数据
  const settingsData: SettingsData = {
    systemName: 'IBMS 管理系统',
    systemLogo: '',
    systemIcon: '',
    systemDescription: '智能建筑管理系统',
    
    passwordMinLength: 8,
    passwordComplexity: true,
    loginRetryLimit: 5,
    sessionTimeout: 30,
    
    emailNotifications: true,
    smsNotifications: false,
    systemNotifications: true,
    
    theme: 'light',
    language: 'zh-CN',
    sidebarCollapsed: false,
    
    monitorEnabled: true,
    monitorInterval: 5,
    alertThreshold: 80,
    
    dataRetentionDays: 90,
    autoBackupEnabled: true,
    backupInterval: 24
  };

  useEffect(() => {
    // 加载设置数据
    form.setFieldsValue(settingsData);
  }, [form]);

  // 处理表单提交
  const handleSubmit = async (values: SettingsData) => {
    setLoading(true);
    try {
      // 模拟API调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('系统设置保存成功');
    } catch (error) {
      message.error('保存失败，请重试');
    } finally {
      setLoading(false);
    }
  };

  // 重置设置
  const handleReset = () => {
    form.setFieldsValue(settingsData);
    message.info('设置已重置为默认值');
  };

  // 处理文件上传
  const handleUpload = (field: string) => {
    // 模拟文件上传
    setUploading(true);
    setTimeout(() => {
      form.setFieldsValue({ [field]: `/uploads/${field}.png` });
      setUploading(false);
      message.success('文件上传成功');
    }, 1000);
  };

  return (
    <div style={{ padding: '24px' }}>
      <Card 
        title="系统设置" 
        extra={
          <div>
            <Button 
              style={{ marginRight: 8 }}
              icon={<ReloadOutlined />}
              onClick={handleReset}
            >
              重置
            </Button>
            <Button 
              type="primary" 
              icon={<SaveOutlined />}
              loading={loading}
              onClick={() => form.submit()}
            >
              保存设置
            </Button>
          </div>
        }
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          {/* 基本信息设置 */}
          <Divider orientation="left">基本信息</Divider>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                label="系统名称"
                name="systemName"
                rules={[{ required: true, message: '请输入系统名称' }]}
              >
                <Input placeholder="请输入系统名称" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                label="系统描述"
                name="systemDescription"
              >
                <Input placeholder="请输入系统描述" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={12}>
              <Form.Item label="系统Logo" name="systemLogo">
                <div>
                  <Input 
                    placeholder="请上传系统Logo" 
                    disabled 
                    style={{ marginBottom: 8 }}
                  />
                  <Button 
                    loading={uploading}
                    onClick={() => handleUpload('systemLogo')}
                  >
                    上传Logo
                  </Button>
                </div>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item label="系统图标" name="systemIcon">
                <div>
                  <Input 
                    placeholder="请上传系统图标" 
                    disabled 
                    style={{ marginBottom: 8 }}
                  />
                  <Button 
                    loading={uploading}
                    onClick={() => handleUpload('systemIcon')}
                  >
                    上传图标
                  </Button>
                </div>
              </Form.Item>
            </Col>
          </Row>

          {/* 安全设置 */}
          <Divider orientation="left">安全设置</Divider>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                label="密码最小长度"
                name="passwordMinLength"
                rules={[{ required: true, message: '请输入密码最小长度' }]}
              >
                <Input type="number" min={6} max={20} placeholder="请输入密码最小长度" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="登录重试次数"
                name="loginRetryLimit"
                rules={[{ required: true, message: '请输入登录重试次数' }]}
              >
                <Input type="number" min={3} max={10} placeholder="请输入登录重试次数" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="会话超时时间(分钟)"
                name="sessionTimeout"
                rules={[{ required: true, message: '请输入会话超时时间' }]}
              >
                <Input type="number" min={15} max={480} placeholder="请输入会话超时时间" />
              </Form.Item>
            </Col>
          </Row>

          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                label="密码复杂度要求"
                name="passwordComplexity"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>

          {/* 通知设置 */}
          <Divider orientation="left">通知设置</Divider>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                label="邮件通知"
                name="emailNotifications"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="短信通知"
                name="smsNotifications"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="系统通知"
                name="systemNotifications"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>

          {/* 界面设置 */}
          <Divider orientation="left">界面设置</Divider>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                label="主题"
                name="theme"
                rules={[{ required: true, message: '请选择主题' }]}
              >
                <Select placeholder="请选择主题">
                  <Option value="light">浅色主题</Option>
                  <Option value="dark">深色主题</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="语言"
                name="language"
                rules={[{ required: true, message: '请选择语言' }]}
              >
                <Select placeholder="请选择语言">
                  <Option value="zh-CN">简体中文</Option>
                  <Option value="en-US">English</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="默认折叠侧边栏"
                name="sidebarCollapsed"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
          </Row>

          {/* 监控设置 */}
          <Divider orientation="left">监控设置</Divider>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                label="启用监控"
                name="monitorEnabled"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="监控间隔(分钟)"
                name="monitorInterval"
                rules={[{ required: true, message: '请输入监控间隔' }]}
              >
                <Input type="number" min={1} max={60} placeholder="请输入监控间隔" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="报警阈值(%)"
                name="alertThreshold"
                rules={[{ required: true, message: '请输入报警阈值' }]}
              >
                <Input type="number" min={50} max={100} placeholder="请输入报警阈值" />
              </Form.Item>
            </Col>
          </Row>

          {/* 存储设置 */}
          <Divider orientation="left">存储设置</Divider>
          <Row gutter={16}>
            <Col span={8}>
              <Form.Item
                label="数据保留天数"
                name="dataRetentionDays"
                rules={[{ required: true, message: '请输入数据保留天数' }]}
              >
                <Input type="number" min={7} max={365} placeholder="请输入数据保留天数" />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="启用自动备份"
                name="autoBackupEnabled"
                valuePropName="checked"
              >
                <Switch />
              </Form.Item>
            </Col>
            <Col span={8}>
              <Form.Item
                label="备份间隔(小时)"
                name="backupInterval"
                rules={[{ required: true, message: '请输入备份间隔' }]}
              >
                <Input type="number" min={1} max={168} placeholder="请输入备份间隔" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Card>
    </div>
  );
};

export default Settings;